<template>
  <view class="header">
    <view class="header-section">
      <view class="header-content">
        <view class="main-title">
          <!-- <image :src="statusTrans.imageSrc" alt=""></image> -->
          <!-- 已付款, 未付款,待收货 -->
          <text
            v-if="
              order.trade_status == 0 ||
                order.trade_status == 2 ||
                order.trade_status == -1
            "
            class="iconfont icon-clock"
            style="color: #fff; font-size: 54rpx"
          ></text>
          <!-- 已完成 -->
          <text
            v-else-if="order.trade_status == 3"
            class="iconfont icon-success"
            style="color: #fff; font-size: 54rpx"
          ></text>
          <!-- 已取消 -->
          <text
            v-else-if="order.trade_status == 1"
            class="iconfont icon-prompt"
            style="color: #fff; font-size: 54rpx"
          ></text>
          <text>{{ statusTrans.statusStr }}</text>
        </view>
        <view class="subtitle" v-if="statusTrans.str">{{ statusTrans.str }}</view>
        <view class="subtitle" v-if="order.apply_delete == 1">已申请取消</view>
        <view
          class="order-price-box"
          v-if="order.pay_type != 2 && order.trade_status == -1"
        >
          <text>{{ $t("order.needPay") }}：￥</text>
          <text>{{ order.pay_price | priceBeforeZero }}</text>
          <text>{{ order.pay_price | priceAfterZero }}</text>
          <!-- <text style="margin-left:10rpx;">倒计时:{{h}}:{{m}}:{{s}}</text> -->
        </view>
        <view class="flex-box">
          <view
            class="operate-btn"
            v-if="statusTrans.btnWord && statusTrans.btnWord != $t('order.warn')"
            @click="handleBtn"
            >{{ statusTrans.btnWord }}</view
          >
          <view
            class="friend-pay"
            v-if="order.trade_status == -1 && order.pay_type != 2 && order.order_type != 7"
            @click="gotoFriendPay"
            >{{$t('order.fri')}}</view
          >
        </view>
      </view>
    </view>
    <view class="headerBg"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    order: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
  },
  computed: {
    statusTrans() {
      //   订单状态，-1:默认，0:待发货，1:已取消，2:已发货，3:已确认
      let str = "", //订单注释
        btnWord = "", //按钮文本
        statusStr = ""; //订单状态title
      if (this.order.trade_status == -1 && this.order.pay_type != 2) {
        statusStr = this.$t('order.wait');
        btnWord = this.$t('order.toPay');
      }
      // 待发货,  或者货到付款,且状态未支付
      if (
        this.order.trade_status == 0 ||
        (this.order.trade_status == -1 && this.order.pay_type == 2)
      ) {
        str = this.$t('order.toDo');
        statusStr = this.$t('order.waitSend');
        btnWord = this.$t('order.warn');
      }
      if (this.order.trade_status == 1) {
        statusStr = this.$t('shop.cancled');
        btnWord = "";
        // if (this.order.is_delivery == 1 && this.order.delivery_info) {
        str = this.$t('order.canReason') + "：" + this.order.cancel_reason[6];
        // }
      }
      if (this.order.trade_status == 2) {
        statusStr = this.$t('order.waitTake');
        str = "";
        btnWord = "";
      }
      if (this.order.trade_status == 3) {
        statusStr = this.$t('person.status4');
        str = this.$t('order.taked');
        btnWord = "";
      }

      if (this.order?.is_offline == 1 && this.order.is_pay == 1 && this.order.order_type == 3) {
				if (this.order.trade_status == 3) {
					statusStr = '已完成'
					str = '您的订单已消费，期待您再次预定';
				} else {
					statusStr = `${this.$t('order.foodCode')}：${this.order.food_code}`;
					str = this.$t('order.prepare');
				}
      }

      if(this.order){
        let {order_type,trade_status} = this.order
        if(order_type === 1){
          if(trade_status == 3){
            // 已使用
            statusStr = '已完成'
            str = '您的订单已消费，期待您再次预定'
          }else if([0,2].includes(trade_status)){
            // 待核销
            statusStr = '待使用'
            str = '';
            btnWord = this.$t('order.warn');
          }
        }
      }

      return {
        str,
        btnWord,
        statusStr,
      };
    },
  },
  methods: {
    gotoFriendPay() {
      this.$utils.toUrl(
        `/order/pay-another/pay-another?orderId=${this.order.order_id}`
      );
      return;
    },
    handleBtn() {
      this.$emit("handleOrderTopBtn", {
        id: this.order.order_id,
        status: this.order.trade_status,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-section {
  width: 100%;
  // height: 152rpx;
  padding: 20rpx 0;
  // padding-bottom: 30rpx;
  background: #F0250E;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: PingFang SC;
  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .main-title {
      margin-bottom: 20rpx;
      font-size: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      height: 56rpx;
      font-size: 40rpx;
      font-weight: 600;
      color: #fff;
      .iconfont {
        margin-right: 5rpx;
      }
    }

    .subtitle {
      text-align: center;

      line-height: 40rpx;
      font-size: 28rpx;
    }

    .order-price-box {
      display: flex;
      justify-content: center;
      align-items: baseline;
      font-size: 28rpx;
      margin-bottom: 32rpx;
    }

    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
      .friend-pay {
        width: 200rpx;
        height: 70rpx;
        border: 1px solid #fff;
        border-radius: 35rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #fff;
        margin-left: 24rpx;
      }
    }

    .operate-btn {
      width: 200rpx;
      height: 70rpx;
      background: #fff;
      border-radius: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #f0250e;
      
    }
  }
}

.headerBg{
  height: 134rpx;
  background: linear-gradient(180deg, #F0250E 0%, #F2F2F2 100%);
}
</style>
